<template>
  <div>
    <!-- 搜索 -->
     <search-bar @search="search"  @searchCustomer="searchCustomer" :needAdd="true" @add="add">
      <single-search v-model="param.userName" label="客户名称"></single-search>
      <select-search v-model="param.state" label="维修进度" :options="order_status_MAP" labelKey="name" valueKey="name">
      </select-search>
      <select-search v-model="param.engineer" label="工程师姓名" :options="engineerList" labelKey="name" valueKey="name">
      </select-search>
    </search-bar>

     <portal to="breadcrumb-area">
       <div>
         <el-button type="primary" @click="batchExport">批量导出</el-button>
       </div>
    </portal>
    <!-- 表格 -->
    <div class="table-wrapper">
      <el-table :data="tableData" border stripe style="width: 100%;">
        <el-table-column prop="number" label="报修编号" min-width="120px" width="160px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="报修时间" min-width="150px" width="160px"></el-table-column>
        <el-table-column prop="userCompany" label="客户名称" min-width="100px" width="100px">
          <template slot-scope="{ row }">{{row.declarantCompany || row.userCompany || row.userName}}</template>
        </el-table-column>
        <el-table-column prop="description" label="报修内容" min-width="140px" width="160px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="handleTime" label="要求上门维修时间" min-width="80px" width="160px"></el-table-column>
        <el-table-column prop="engineer" label="工程师" width="80px"></el-table-column>
        <el-table-column prop="state" label="维修进度" width="80px">
          <template slot-scope="{ row }">{{ order_status_MAP[row.state] }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="100px">
          <template slot-scope="{ row }">
            <OperateBtn type="detail" @click="goDetail(row.id, 'A')"/>
            <OperateBtn type="handle" v-if="row.state === 0" @click="toHandle(row.id)"/>
            <OperateBtn type="edit" v-if="row.state === 2 && (row.isCallback === 0 || row.isCallback === false)" @click="goDetail(row.id,'B')"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      :current-page.sync="page"
      :page-size.sync="pageSize"
      @size-change="size => search(1, size)"
      @current-change="search"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>

    <assignDialog ref="assignDialog"  @reload="search(page)"/>
     <addDialog ref="addDialog" @reload="search(page)"></addDialog>
     <customer-dialog ref="customerDialog"   />
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import SingleSearch from '@/components/SearchBar/SingleSearch'
import SelectSearch from '@/components/SearchBar/SelectSearch'
// import SelectSearchId from '@/components/SearchBar/SelectSearchId'
import OperateBtn from '@/components/OperateBtn'
// import QRCodeDialog from '@/components/QRCodeDialog'
import assignDialog from "./assignDialog";
import addDialog from "./addDialog";
import * as OrderAction from '@/api/order'
import { order_status_MAP } from '@/assets/js/enum'
import { Message } from 'element-ui'
import messageCommon from '@/tool/messageCommon.js'
import dayjs from 'dayjs'
import  messageSend from '@/tool/messageSend.js'
import CustomerDialog from "@/pages/orderManagement/customerDialog.vue";
import store from "@/store";

export default {
  name: "assign",
  computed: {
    store() {
      return store
    }
  },
  components: {
    CustomerDialog,
    SearchBar,
    SingleSearch,
    SelectSearch,
    OperateBtn,
    assignDialog,
    addDialog
    // SelectSearchId
  },
  data () {
    return {
      tableDataCustomer:[],
      name: "companyManage",
      param: {},
      total: 0,
      page: 1,
      pageSize: 10,
      tableData: [],
      engineerList: [],
      order_status_MAP
    }
  },
  methods: {
    searchCustomer()
    {
        this.$refs.customerDialog.dialogTableVisible=true
    },
    // 维修申报弹窗
    add() {
      this.$refs.addDialog.show();
     },
    // 跳转至详情
    goDetail (id,type) {
      // 跳转详情页
      this.$router.push({ path: '/orderManagement/detail', query: { id: id, type: type } })
    },
    // 去处理
    toHandle(row) {
      this.$refs.assignDialog.show(row,this.engineerList)
    },

    // 查询订单列表
    async search (page = 1, size) {
      // size change、按条件搜索时重置页码为1
      if (page === 1) this.page = 1
      const param = {
        pageNum: page,
        pageSize: size || this.pageSize,
        ...this.param
      }
      try {
        const res = await OrderAction.selectPage(param);
        this.tableData = res.dataList
        this.total = res.totalSize
      } catch (e) {
        Message.error(e.message)
      }
    },

    // 查询所有的工程师列表
    async allengineer(page=1,size=50){
      const param = {
        pageNum: page,
        pageSize: size,
        type: 'ENGINEER'
      }
      try {
        const res = await OrderAction.getAllEngineer(param);
      if (res) {
        this.engineerList = res.dataList;
      }
      }catch (e) {
        Message.error(e.message)
      }

    },
    // 批量导出
    async batchExport () {
      try {
        const param = {
          ...this.param
        }
        const res = await OrderAction.orderExport(param)
        const url = window.URL.createObjectURL(new Blob([res]))
        let link = document.createElement("a")
        link.style.display = "none"
        link.href = url
        link.setAttribute("download", "订单统计.xlsx")
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      } catch (e) {
        Message.error(e.message)
      }
    },
  },
  async created () {

      await this.allengineer();
      await this.search();

  }
}
</script>

<style lang="scss" scope>
  .order-list {
    padding: 20px;

    .selectInput {
      // text-align: left;
      display: inline-block;
      width: 300px;
      height: 50px;
      margin: 10px;
      line-height: 50px;
      text-align: center;
    }
  }
</style>
